<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>for my life</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");

      :root {
        font-size: 15px;
      }

      body {
        font-family: "Quicksand", sans-serif;
        margin: 0;
        min-height: 100vh;
        background-color: #ddb9d6;
        background-image: radial-gradient(closest-side, #d4a37399, #d4a37300),
          radial-gradient(closest-side, #fad2e199, #fad2e100),
          radial-gradient(closest-side, #bee1e699, #bee1e600),
          radial-gradient(closest-side, #e9edc999, #e9edc900),
          radial-gradient(closest-side, #cddafd99, #cddafd00);
        background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
          110vmax 110vmax, 90vmax 90vmax;

        background-position: -80vmax -80vmax, 60vmax 30vmax, 10vmax 10vmax,
          -30vmax -10vmax, 50vmax 50vmax;

        background-repeat: no-repeat;

        animation: 10s movement linear infinite;
      }

      body::after {
        content: "";
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        letter-spacing: 4px;
      }

      span {
        position: relative;
        z-index: 10;
        display: flex;
        min-height: 100vh;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 5rem;
        color: transparent;
        text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.6),
          0px 4px 4px rgba(0, 0, 0, 0.05);
      }

      @keyframes movement {
        0%,
        100% {
          background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax,
            110vmax 110vmax, 90vmax 90vmax;

          background-position: -80vmax -80vmax, 60vmax 30vmax, 10vmax 10vmax,
            -30vmax -10vmax, 50vmax 50vmax;
        }

        25% {
          background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax,
            90vmax 90vmax, 100vmax 100vmax;

          background-position: -60vmax -70vmax, 50vmax 40vmax, 20vmax 0vmax,
            -20vmax -20vmax, 40vmax 40vmax;
        }

        50% {
          background-size: 120vmax 120vmax, 80vmax 60vmax, 90vmax 120vmax,
            90vmax 90vmax, 110vmax 105vmax;

          background-position: -65vmax -75vmax, 45vmax 40vmax, 30vmax 5vmax,
            -25vmax -15vmax, 42vmax 30vmax;
        }

        75% {
          background-size: 80vmax 100vmax, 66vmax 65vmax, 100vmax 110vmax,
            95vmax 95vmax, 115vmax 115vmax;

          background-position: -75vmax -75vmax, 35vmax 40vmax, 30vmax 25vmax,
            -25vmax -25vmax, 42vmax 33vmax;
        }
      }
    </style>
  </head>
  <body>
    <span>ayu</span>
  </body>
</html>
